<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加事件的方式</title>
</head>
<body>
    <div id="app">点我</div>
</body>
<script>
    var app = document.getElementById("app");

    //1.所有浏览器下（IE9+）
    
        // app.addEventListener('click',function(e) {
        //     alert('第一次弹出')
        // })

        // app.addEventListener('click',function(e) {
        //     alert('第二次弹出')
        // })


    //IE浏览器(IE9-)

        // app.attachEvent('onclick',function(){
        //     alert('1')
        // })
        // app.attachEvent('onclick',function(){
        //     alert('2')
        // })

    //处理事件绑定的兼容性问题
    // function addEvent(element,eventType,callback) {
    //     if(element.addEventListener){
    //         element.addEventListener(eventType,callback)
    //         // btn.addEventListener('click',function(e) {})
    //     }else if(element.attachEvent){
    //         element.attachEvent('on'+eventType,callback)
    //     }else {
    //         element['on'+eventType] = callback;
    //     }
    // }

    // addEvent(app,'click',function(e) {alert(999)})
    
    //移除事件

    // app.onclick = function() {
    //     alert('弹出一次就行')
    //     //移除事件
    //     app.onclick = null
    // };

    // function h(){ 
    //     alert('弹出once就行')
    //     app.removeEventListener('click',h);
    // }
    // app.addEventListener('click',h)
    
    // function h(){
    //     alert('1')
    //     app.detachEvent('onclick',h);
    // }
    // app.attachEvent('onclick',h)
</script>
</html>